import { FC, useEffect } from "react";
import "./edit.css";
import { useDispatch } from "react-redux";
import EditCanvas from "./components/EditCanvas";
import {
  changeSelectedId,
  changeSelectedList,
} from "../../../store/componentsReducer";
import LeftPanel from "./components/LeftPanel";
import RightPanel from "./components/RightPanel";
import EditHeader from "./components/EditHeader";
import { useParams } from "react-router";
import { useRequest } from "ahooks";
import { find_one } from "../../../server/manageServer";
import { changePageTitle } from "../../../store/pageInfoReducer";
const Edit: FC = () => {
  const { _id } = useParams();

  const dispatch = useDispatch();

  const clearSelectedId = () => {
    dispatch(changeSelectedId(""));
  };

  useEffect(() => {
    if (!_id) return;
    run(_id);
  }, []);
  const { run } = useRequest(find_one, {
    manual: true,
    onSuccess(result) {
      const { data } = result.data;
      console.log(data);

      if (!data) return dispatch(changeSelectedList([]));

      dispatch(changePageTitle(data.title));
      
 dispatch(changeSelectedList(data.componentList));     
    },
    onFinally() {},
  });

  return (
    <div className="flex flex-col h-100vh bg-#f0f2f5  overflow-hidden">
      <div className=" bg-#fff h-10 mt-1 mb-2">
        <EditHeader />
      </div>
      <div className="flex-auto py-3 ">
        <div className="flex mx-5  h-100% ">
          <div className="w-75 bg-#fff px-3">
            <LeftPanel />
          </div>
          <div
            className="flex-1 pos-relative overflow-hidden"
            onClick={clearSelectedId}
          >
            <div className="pos-absolute w-95 h-152 top-50% left-50% transform-translate-x--50% transform-translate-y--50% bg-#fff overflow-y-auto canvas">
              <EditCanvas />
            </div>
          </div>
          <div className="w-78 bg-#fff px-3">
            <RightPanel />
          </div>
        </div>
      </div>
    </div>
  );
};
export default Edit;
